<template>
  <div class="meeting-rooms-view">
    <h1>会议室列表</h1>
    
    <el-table 
      :data="meetingRooms" 
      v-loading="loading" 
      border
      @sort-change="handleSortChange"
    >
      <el-table-column prop="name" label="名称" width="180" sortable />
      <el-table-column prop="type" label="类型" width="120">
        <template #default="{row}">
          {{ formatType(row.type) }}
        </template>
      </el-table-column>
      <el-table-column prop="seats" label="座位数" width="100" sortable />
      <el-table-column prop="area_sqm" label="面积(㎡)" width="120" sortable>
        <template #default="{row}">
          {{ formatArea(row.area_sqm) }}
        </template>
      </el-table-column>
      <el-table-column label="设备" width="180">
        <template #default="{row}">
          <div class="equipment-text">
            <span v-if="row.hasProjector">投影仪</span>
            <span v-if="row.hasSoundSystem">音响</span>
            <span v-if="row.hasNetwork">网络</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="price_per_hour" label="价格(元/小时)" width="140" sortable>
        <template #default="{row}">
          {{ formatPrice(row.price_per_hour) }}
        </template>
      </el-table-column>
      <!-- <el-table-column prop="status" label="状态" width="120">
        <template #default="{row}">
          <el-tag :type="getStatusTagType(row.status)">
            {{ formatStatus(row.status) }}
          </el-tag>
        </template>
      </el-table-column> -->
      <el-table-column label="操作" width="120">
        <template #default="{row}">
          <el-button size="small" @click="showDetail(row)">详情</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog v-model="detailVisible" title="会议室详情" width="50%">
      <div v-if="currentRoom">
        <h3>{{ currentRoom.name }}</h3>
        <el-descriptions border>
          <el-descriptions-item label="类型">{{ formatType(currentRoom.type) }}</el-descriptions-item>
          <el-descriptions-item label="座位数">{{ currentRoom.seats }}</el-descriptions-item>
          <el-descriptions-item label="面积">{{ formatArea(currentRoom.area_sqm) }}</el-descriptions-item>
          <el-descriptions-item label="价格">{{ formatPrice(currentRoom.price_per_hour) }}元/小时</el-descriptions-item>
          <!-- <el-descriptions-item label="状态">{{ formatStatus(currentRoom.status) }}</el-descriptions-item> -->
          <el-descriptions-item label="设备">
            <div v-if="currentRoom.hasProjector">投影仪</div>
            <div v-if="currentRoom.hasSoundSystem">音响系统</div>
            <div v-if="currentRoom.hasNetwork">网络</div>
            <div v-if="currentRoom.otherEquipmentDetails">{{ currentRoom.otherEquipmentDetails }}</div>
          </el-descriptions-item>
          <el-descriptions-item label="描述">{{ currentRoom.description || '无' }}</el-descriptions-item>
        </el-descriptions>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import axios from 'axios'
import { ElMessage } from 'element-plus'
import { VideoCamera, Microphone, Connection } from '@element-plus/icons-vue'

// 初始化数据
const meetingRooms = ref([])
const loading = ref(false)
const detailVisible = ref(false)
const currentRoom = ref(null)

// 状态映射
const statusMap = {
  'Available': '可用',
  'Locked': '锁定',
  'Booked': '已预订',
  'InUse': '使用中',
  'Maintenance': '维护中'
}

const typeMap = {
  'CLASSROOM_STYLE': '教室型',
  'ROUND_TABLE_STYLE': '圆桌型'
}

// 工具函数
const formatStatus = (status) => statusMap[status] || status
const formatType = (type) => typeMap[type] || type
const formatPrice = (price) => {
  const num = parseFloat(price)
  return isNaN(num) ? '0.00' : num.toFixed(2)
}

const formatArea = (area) => {
  const num = parseFloat(area)
  return isNaN(num) ? '--' : num.toFixed(2) + '㎡'
}

const getStatusTagType = (status) => {
  switch(status) {
    case 'Available': return 'success'
    case 'Booked': return 'warning'
    case 'InUse': return ''
    default: return 'danger'
  }
}

// 方法
const showDetail = (room) => {
  currentRoom.value = room
  detailVisible.value = true
}

const handleSortChange = ({ column, prop, order }) => {
  if (!Array.isArray(meetingRooms.value)) return
  
  meetingRooms.value.sort((a, b) => {
    if (order === 'ascending') {
      return a[prop] - b[prop]
    } else {
      return b[prop] - a[prop]
    }
  })
}

// 生命周期
onMounted(() => {
  loadMeetingRooms()
})

// API请求
const loadMeetingRooms = async () => {
  try {
    loading.value = true
    const response = await axios.get('http://localhost:8080/api/meetingrooms')
    
    // 验证数据格式
    if (Array.isArray(response.data)) {
      meetingRooms.value = response.data.map(room => {
        console.log('会议室数据:', room)
        return {
          ...room,
          // 确保字段名和类型正确
          hasProjector: room.hasProjector,
          hasSoundSystem: room.hasSoundSystem,
          hasNetwork: room.hasNetwork,
          area_sqm: room.areaSqm,
          price_per_hour: room.pricePerHour
        }
      })
    } else {
      meetingRooms.value = []
      ElMessage.warning('返回数据格式不正确')
    }
  } catch (error) {
    console.error('获取会议室数据失败:', error)
    ElMessage.error('获取会议室数据失败')
    meetingRooms.value = [] // 确保始终是数组
  } finally {
    loading.value = false
  }
}
</script>

<style scoped>
.meeting-rooms-view {
  padding: 20px;
}

.equipment-text span {
  display: inline-block;
  margin-right: 8px;
  padding: 2px 6px;
  background: #f0f0f0;
  border-radius: 4px;
  font-size: 12px;
}

.el-table {
  margin-top: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.el-table :deep(.el-table__cell) {
  padding: 12px 0;
}

.el-dialog {
  border-radius: 8px;
}

.el-descriptions {
  margin-top: 16px;
}

.el-descriptions-item__label {
  font-weight: bold;
  color: #606266;
}

.el-descriptions-item__content {
  color: #303133;
}
</style>
